<template>
  <div class="uploadCourseDesign">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程设计</el-breadcrumb-item>
      <el-breadcrumb-item>上传课设安排</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newMajorName" placeholder="请输入专业"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newGrade" placeholder="请输入年级"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newAcademicYear" placeholder="请输入学年"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newTerm" placeholder="请输入学期"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="overflow-clear">
          <el-button type="primary" class="add-pd-26 float-right" @click="searchCourse">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <hr>
    <div>
      <div class="table-title-before"></div>
      <el-button-group style="margin-bottom:4px;" class="float-right">
        <el-button type="primary" class="add-pd-26">
          <router-link to="/NewCourseDesign" style="text-decoration:none;color:#fff">新增</router-link>
        </el-button>
        <el-button type="primary" class="add-pd-26">导入</el-button>
        <el-button type="primary" class="add-pd-26">导出</el-button>
      </el-button-group>
    </div>
    <el-table
      :data="courseInfo|concreteCourse(form.majorName,form.grade,form.academicYear,form.term)"
      style="width: 100%"
      :default-sort="{prop: 'courseName',order:'ascending'}">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="courseNameCN"
        label="课程名称"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="负责教师"
        min-width="130"
        sortable>
      </el-table-column>
      <el-table-column
        prop="className"
        label="班级"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="uploader"
        label="上传人"
        min-width="100">
      </el-table-column>
      <el-table-column
        label="课程设计安排"
        min-width="130">
        <template scope="scope">
          <el-button type="text">{{scope.row.courseArrangeInfoName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="课程设计内容"
        min-width="130">
        <template scope="scope">
          <el-button type="text">{{scope.row.courseDesignInfoName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="120">
        <template scope="scope">
          <el-button type="text">修改</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'uploadCourseDesign',
    data() {
      return {
        form: {
          majorName: '',
          grade: '',
          academicYear: '',
          term: '',
          newMajorName: '',
          newGrade: '',
          newAcademicYear: '',
          newTerm: ''
        },
        courseInfo: [{
          courseNameCN: 'java',
          teacherName: '翁自觉',
          className: '软件132003班',
          startTime: '2016-03-01',
          endTime: '2016-03-15',
          uploader: '翁自觉',
          courseArrangeInfoName: '课程设计安排',
          courseDesignInfoName: '课程设计内容',
          majorName: '软件工程',
          grade: '2013',
          academicYear: '2016',
          term: '1',
          //不需要显示
          courseArrangeInfo: '',    // 课程设计安排路径
          courseDesignInfo: ''     //课程设计内容路径

        },
          {
            courseNameCN: 'oracle数据库',
            teacherName: '谢斌红',
            className: '软件132003班',
            startTime: '2017-03-01',
            endTime: '2017-03-15',
            uploader: '谢斌红',
            majorName: '软件工程',
            grade: '2013',
            academicYear: '2017',
            term: '1'
          }],
        pagingCourseInfo:[],
        totalPage: 20,
        currentPage: 1,
        pageSizes: [10, 20, 30, 40],
        pageSize: 10

      }
    },
    created () {
      this.res();
    },
    methods: {
      res: function () {
        this.$http.get('/TeachingMIS/courseDesign/getDesignBaseInfo',
         /* {//请求参数
            params: {
              page: '1'
            }
          }*/)
          .then((res) => {
            // 响应成功回调
            this.courseInfo = res.body.info
            this.totalPage=res.body.num.num
            console.log(res)
          }, (err) => {
            // 响应错误回调
            //console.log(err)
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },
      getPagingData: function () {
        var start = (currentPage - 1) * pageSize;
        var end = currentPage * pageSize;
        var msg=[];
        for (var i = start; i < end; i++) {
          msg.push(this.courseInfo[i])
        }
        this.pagingCourseInfo=msg;
      },
      searchCourse: function () {
        this.form.majorName = this.form.newMajorName
        this.form.grade = this.form.newGrade
        this.form.academicYear = this.form.newAcademicYear
        this.form.term = this.form.newTerm
      }
    }
    ,
    filters: {
      concreteCourse: function (course, majorName, grade, academicYear, term) {
        var msg = [];
        if (majorName === '' || grade === '' || academicYear === '' || term === '') {
          return course
        }
        for (var i = 0, len = course.length; i < len; i++) {
          if (course[i].majorName === majorName && course[i].grade === grade && course[i].academicYear === academicYear && course[i].term === term) {
            msg.push(course[i])
          }
        }
        return msg
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }

  .add-pd-26 {
    padding-left: 1.6em;
    padding-right: 1.6em;
  }

  .hidden {
    display: none;
  }
</style>
